<template>
  <el-dialog
    :title="permissionForm.id ? '编辑权限点' : '添加权限点'"
    :visible="dialogVisible"
    width="50%"
    @close="closeDialog">
    <el-form :model="permissionForm" :rules="permissionRules" ref="permissionRef" label-width="80px">
      <el-form-item label="权限名称" prop="name">
        <el-input v-model="permissionForm.name" />
      </el-form-item>
      <el-form-item label="权限标识" prop="code">
        <el-input v-model="permissionForm.code" />
      </el-form-item>
      <el-form-item label="权限描述">
        <el-input v-model="permissionForm.description" />
      </el-form-item>
      <el-form-item label="权限启用">
        <el-switch
          v-model="permissionForm.enVisible"	
          active-value="1"
          inactive-value="0"
          active-text="启用"
          inactive-text="不启用"
        />
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="$emit('close-dialog')">取 消</el-button>
      <el-button type="primary" @click="submit">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { addPermission, getPermissionDetail, updatePermission } from '@/api/permission'

export default {
  props: {
    dialogVisible: {
      type: Boolean,
      required: true
    },
    type: {
      type: String,
      required: true
    },
    pid: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      // 表单数据对象
      permissionForm: {
        name: '', // 权限名称
        code: '', // 权限标识
        description: '', // 权限描述
        enVisible: '0' // 权限启用标识
      },
      // 表单验证规则对象
      permissionRules: {
				name: [
          { required: true, message: '请填写权限名称', trigger: 'blur' }
        ],
        code: [
          { required: true, message: '请填写权限标识', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    // 点击 X 和蒙板，关闭弹窗
    closeDialog() {
      // 触发自定义事件，通知父组件去关闭弹窗
      this.$emit('close-dialog')
      // 弹窗关闭时，清空表单内容
      // resetFields 方法：可以清空表单内容并移除校验结果
      this.$refs.permissionRef.resetFields()
      // 手动清空数据
      this.permissionForm = {
        name: '', // 权限名称
        code: '', // 权限标识
        description: '', // 权限描述
        enVisible: '0' // 权限启用标识
      }
    },
    submit() {
      // 兜底校验
      this.$refs.permissionRef.validate(async valid => {
        if (!valid) return
        // 校验通过
        // 发起请求
        if (this.permissionForm.id) {
          // 编辑操作
          await updatePermission(this.permissionForm)
        } else {
          // 添加操作
          await addPermission({
            ...this.permissionForm,
            type: this.type,
            pid: this.pid
          })
        }
        // 提示用户
        const msg = this.permissionForm.id ? '编辑权限点成功' : '添加权限点成功'
        this.$message.success(msg)
        // 关闭弹窗
        this.$emit('close-dialog')
        // 刷新表格数据
        this.$emit('get-permission-list')
      })
    },
    async getPermissionDetail(id) {
      // 调用接口，获取权限点详细数据
      const res = await getPermissionDetail(id)
      // 将详细数据赋值非表单数据对象，完成数据回显
      this.permissionForm = res.data
    }
  }
}
</script>

<style>

</style>